3.1.1 JS 运行机制.

Event Loop是javascript的执行机制
JS的执行机制就是一个主线程 + 一个任务队列

事件循环流程讲的通俗易懂,对代码的执行顺序有了透彻的理解

除了广义的同步任务和异步任务,我们对任务有更精细的定义:

macro-task(宏任务):包括整体代码script,setTimeout,setInterval
micro-task(微任务):Promise,process.nextTick
1
2

不同类型的任务会进入对应的Event Queue,比如setTimeout和setInterval会进入相同的Event Queue。 事件循环的顺序,决定js代码的执行顺序。进入整体代码(宏任务)后,开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始,找到其中一个任务队列执行完毕,再执行所有的微任务

遇到setTimeout,那么将其回调函数注册后分发到宏任务Event Queue。

遇到了Promise,new Promise立即执行,then函数分发到微任务Event Queue。

js运行原理

  • 概述

浏览器组成可分两部分:Shell+内核。浏览器内核又可以分成两部分:渲染引擎(layout engineer或者Rendering Engine)和JS引擎。

  • 渲染引擎功能作用

渲染引擎,负责对网页语法的解释(如HTML、JavaScript)并渲染网页。
所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
不同的浏览器内核对网页编写语法 的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,
这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

  • 定义

    • 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎
    • 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具
  • 渲染引擎:

    firefox使用gecko引擎

    IE使用Trident引擎

    2015年微软推出自己新的浏览器,原名叫斯巴达,后改名edge,使用edge引擎

    opera最早使用Presto引擎,后来弃用

    chrome\safari\opera使用webkit引擎

    13年chrome和opera开始使用Blink引擎
1
2
3
4
5
6
7
8
9
10
11
  • js引擎:
    老版本IE使用Jscript引擎

    IE9之后使用Chakra引擎

    edge浏览器仍然使用Chakra引擎

    firefox使用monkey系列引擎

    safari使用的SquirrelFish系列引擎

    Opera使用Carakan引擎

    chrome使用V8引擎。nodeJs其实就是封装了V8引擎
1
2
3
4
5
6
7
8
9
10
11
12
13

主线程运行的时候,产生堆(heap)和栈(stack),栈中的代码调用各种外部API,它们在"任务队列"中加入各种事件(click,load,done)。
只要栈中的代码执行完毕,主线程就会去读取"任务队列",依次执行那些事件所对应的回调函数。

执行栈中的代码(同步任务),总是在读取"任务队列"(异步任务)之前执行。

JS中的异步运行机制

  • (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

  • (2)主线程之外,还存在一个”任务队列”(task queue)。只要异步任务有了运行结果,就在”任务队列”之中放置一个事件。

  • (3)一旦”执行栈”中的所有同步任务执行完毕,系统就会读取”任务队列”,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

  • (4)主线程不断重复上面的第三步。

参考